<template>
  <div class="house">
    <el-card>
      <p class="title">
        <i class="el-icon-school" />
        地产列表</p>
       <div>
        <div class="item" v-for="item in formData" :key="item.id" @click="goToDetail(item.id)">
          <div class="left">
            <img v-errImg='require("@/assets/img/1.jpg")'
              :src="item.image"
              alt=""
            >
          </div>
          <div class="right">
              <h3>{{item.title}}</h3>
            <p v-html="item.content"></p>
          </div>
        </div>
       </div>
    </el-card>

  </div>
</template>

<script>
import { propertiesList } from '@/api/manage'
export default {
  name: 'ProjectFrontIndex',

  data () {
    return {
      formData: [
        {
          title: '',
          content: ''
        }
      ],
      limit: 99,
      start: 0,
      titleContains: ''
    }
  },
  updated () {
    this.titleContains = this.$store.state.keyword
    this.getHouseList()
  },
  created () {
    this.titleContains = this.$store.state.keyword
    this.getHouseList()
  },
  methods: {
    // 获取页面参数请求
    async getHouseList () {
      const res = await propertiesList({
        _limit: this.limit,
        _start: this.start,
        title_contains: this.titleContains
      })
      this.formData = res.data
      // console.log('54', this.formData)
    },
    goToDetail (id) {
      this.$router.push(`/details/${id}`)
    }

  }
}
</script>

<style lang="scss" scoped>
.house{
  min-height: 50vw;
}
a{
  text-decoration: none ;
}
.el-card{
  width: 1000px;
  margin: 0 auto;
}
.el-main{
  line-height:0px;
}
.item {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  height: 200px;
}
.left img {
  width: 250px;
  padding-left: 20px;
  height: -webkit-fill-available;
}
.right {
  border-left: 1px solid #ccc;
  width: 600px;
  text-align: center;
}
.right h3 {

  padding-bottom: 10px;
}
.title {
  margin-bottom: 20px;
  color: #deaa56;
  font-size: 20px;
}
.el-icon-office-building{
   vertical-align: middle;
}

</style>
